<template>
  <el-select-v2
    style="width: 100%"
    :loading="loading"
    :options="options"
    filterable
    remote
    :remoteMethod="remoteMethod"
    @change="change"
    v-model="value"
  >
    <template #default="{ item }">
      {{ item.nickName }}
    </template>
  </el-select-v2>
</template>

<script setup lang="ts">
import { ref, shallowRef, computed, onMounted, nextTick, watch } from 'vue'

defineOptions({
  name: 'FilterSelect',
  inheritAttrs: false
})

const props = defineProps({
  options: {
    type: Array,
    default: () => []
  },
  http: Function,
  hanlder: {
    type: Function,
    default: (i) => ({
      label: i.label,
      value: i.value
    })
  },
  modelValue: Number || String || Array
})

const value = ref()
watch(
  () => props.modelValue,
  (val) => {
    console.log('val,va',val)
    value.value = val
  },
  {
    immediate: true
  }
)

const emits = defineEmits(['update:modelValue', 'changeOptions'])

const options = ref([])
watch(
  () => props.options,
  (val) => (options.value = val)
)

const loading = ref(false)
//筛选
const remoteMethod = (query) => {
  if (query !== '') {
    init(query)
  } else {
    options.value = []
  }
}

const change = (e) => {
  emits(
    'changeOptions',
    options.value.find((i) => i.value === e)
  )
  emits('update:modelValue', e)
}

const init = (query) => {
  loading.value = true
  props.http({ pageNum: 1, pageSize: 50, nickName: query }).then((res) => {
    loading.value = false
    options.value = res.data.records.map(props.hanlder)
  })
}
init('')
</script>

<style lang="scss" scoped></style>
